<template>
  <base-page-view class-name="page-container">
    <view class="detail-content">
      <view class="detail-box" v-for="(item,index) in listData" :key="index">
        <view class="left">
          <view class="title">{{item.integral_desc}}</view>
          <view class="time">{{item.created_at|formatTimes}}</view>
        </view>
        <view class="num">{{item.integral>0?'+':''}}{{item.integral|formatMoney}}</view>
      </view>
    </view>
    <no-more :list="listData" :nomore="nomore"></no-more>
  </base-page-view>
</template>

<script>
	export default {
		data() {
			return {
				pageSize: 10,
				pageNo: 1,
				listData: [],
				nomore: false,
			}
		},
    onLoad(option) {
      this.getList()
    },
    onPullDownRefresh() {
      this.pageNo = 1
      this.listData = []
      this.nomore = false
      this.getList()
    },
    onReachBottom() {
      if (this.nomore) return
      this.pageNo += 1
      this.getList()
    },
		methods: {
			async getList() {
			  const res = await this.$api.gainApi.box_income_list({
			    page_size: this.pageSize,
			    page_no: this.pageNo,
			  })
			  if (res.code === 0) {
			    setTimeout(function() {
			      uni.stopPullDownRefresh()
			    }, 500)
			    this.listData = this.listData.concat(res.data)
			    if (res.data.length < this.pageSize) {
			      this.nomore = true
			    }
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail-content{
  margin-top: 20rpx;
  background-color: white;
  .detail-box:last-child{
    border-bottom:none;
  }
}
.detail-box{
  display: flex;
  align-items: center;
  padding: 45rpx 0rpx;
  margin: 0rpx 37rpx;
  justify-content: space-between;
  border-bottom: 2rpx solid #EEEEEE;
  .left{
    .title{
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }
    .time{
      color: #999999;
    }
  }
  .right{
    .num{
      font-size: 28rpx;
      color: #000000;
    }
  }
}
.nomore{
    text-align: center;
    color: #999;
    margin: 20rpx;
}
.empty_view{
  @include sub-item;
  margin: 0 auto;
  width: 240rpx;
  height:240rpx;
  margin-top: 35vh;
  .empty_img{
      width: 240rpx;
      height: 240rpx;
  }
  .tit{
      color: #000;
      margin-top: 10rpx;
      text-align: center;
      font-size: 28rpx;
  }
}
</style>
